<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') //  echarts theme
require('echarts/map/js/china') //  echarts theme
require('echarts/map/js/world') //  echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      mapData: [
        {
          longitude: -100,
          latitude: 40,
          color: 'rgba(255,67,67,1)',
          name: '美国',
          offset: [-40, 0]
        },
        {
          longitude: -5,
          latitude: 55,
          color: 'rgba(255,0,128,1)',
          name: '英国',
          offset: [-40, 0]
        },
        {
          longitude: -100,
          latitude: 60,
          color: 'rgba(255,0,195,1)',
          name: '加拿大',
          offset: [-40, 0]
        },
        {
          longitude: 130,
          latitude: -24,
          color: 'rgba(150,0,255,1)',
          name: '澳大利亚',
          offset: [40, 0]
        },
        {
          longitude: 138.5,
          latitude: 36,
          color: 'rgba(0,255,132,1)',
          name: '日本',
          offset: [40, 0]
        },

        {
          longitude: 10,
          latitude: 50,
          color: 'rgba(0,255,255,1)',
          name: '德国',
          offset: [40, -5]
        },
        {
          longitude: 1,
          latitude: 45,
          color: 'rgba(236,110,20,1)',
          name: '法国',
          offset: [-40, -5]
        },
        {
          longitude: 11.5,
          latitude: 45,
          color: 'rgba(236,204,20,1)',
          name: '意大利',
          offset: [40, 0]
        },
        {
          longitude: -2,
          latitude: 40,
          color: 'rgba(46,240,82,1)',
          name: '西班牙',
          offset: [-40, 0]
        },
        {
          longitude: 114,
          latitude: 22,
          //  color: 'rgba(46,240,82,1)',
          name: '九方通逊',
          offset: [40, 0]
        }
      ]
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      let option = {
        tooltip: {
          show: false
        },
        geo: {
          map: 'world',
          roam: false, //  一定要关闭拖拽
          zoom: 1,
          center: [0, 0], //  调整地图位置
          label: {
            normal: {
              show: false, // 关闭省份名展示
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)'
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: 'rgba(0,0,0,0)',
              borderColor: '#5cc3d2',
              borderWidth: 1, // 设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: '#01012a'
            },
            emphasis: {
              areaColor: '#184cff',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 1)'
            }
          }
        },
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            //  animation: true,
            rippleEffect: {
              brushType: 'stroke'
            },
            symbolSize: function(val, params) {
              return 30
            },
            data: this.mapData.map(function(itemOpt) {
              // console.log(itemOpt)
              return {
                name: itemOpt.name,
                value: [
                  itemOpt.longitude,
                  itemOpt.latitude

                  // itemOpt.value // 数量
                ],
                label: {
                  normal: {
                    show: true,
                    formatter: function(params, ticket, callback) {
                      return params.name
                    },
                    offset: itemOpt.offset
                  },
                  emphasis: {
                    position: 'right',
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    //  color: itemOpt.color // 色值
                    color: itemOpt.color
                  }
                }
              }
            }),
            symbolSize: function(val) {
              return 20 // 描点的大小
            }
          },
          {
            name: '路线',
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 3, // 箭头指向速度，值越小速度越快
              trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(255,67,67,0.1)' //  0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(255,67,67,1)' //  100% 处的颜色
                    }
                  ],
                  global: false //  缺省为 false
                },

                width: 2, // 线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              },
              emphasis: {
                width: 3,
                opacity: 0.5
              }
            },
            data: [
              {
                fromName: '深圳',
                toName: '美国',
                count: '1',
                amount: '89999',
                coords: [
                  [114.085947, 22.547],
                  [-100, 40]
                ]
              }
            ]
          },
          {
            name: '路线',
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 3, // 箭头指向速度，值越小速度越快
              trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(255,0,128,0.1)' //  0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(255,0,128,1)' //  100% 处的颜色
                    }
                  ],
                  global: false //  缺省为 false
                },

                width: 2, // 线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              },
              emphasis: {
                width: 3,
                opacity: 0.5
              }
            },
            data: [
              {
                fromName: '深圳',
                toName: '英国',
                count: '1',
                amount: '89999',
                coords: [
                  [114.085947, 22.547],
                  [-5, 55]
                ]
              }
            ]
          },
          {
            name: '路线',
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 3, // 箭头指向速度，值越小速度越快
              trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(255,0,195,0.1)' //  0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(255,0,195,1)' //  100% 处的颜色
                    }
                  ],
                  global: false //  缺省为 false
                },

                width: 2, // 线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              },
              emphasis: {
                width: 3,
                opacity: 0.5
              }
            },
            data: [
              {
                fromName: '深圳',
                toName: '加拿大',
                count: '1',
                amount: '89999',
                coords: [
                  [114.085947, 22.547],
                  [-100, 60]
                ]
              }
            ]
          },
          {
            name: '路线',
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 3, // 箭头指向速度，值越小速度越快
              trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(150,0,255,0.1)' //  0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(150,0,255,1)' //  100% 处的颜色
                    }
                  ],
                  global: false //  缺省为 false
                },

                width: 2, // 线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              },
              emphasis: {
                width: 3,
                opacity: 0.5
              }
            },
            data: [
              {
                fromName: '深圳',
                toName: '澳大利亚',
                count: '1',
                amount: '89999',
                coords: [
                  [114.085947, 22.547],
                  [130, -24]
                ]
              }
            ]
          },
          {
            name: '路线',
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 3, // 箭头指向速度，值越小速度越快
              trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(0,255,132,0.1)' //  0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,255,132,1)' //  100% 处的颜色
                    }
                  ],
                  global: false //  缺省为 false
                },

                width: 2, // 线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              },
              emphasis: {
                width: 3,
                opacity: 0.5
              }
            },
            data: [
              {
                fromName: '深圳',
                toName: '日本',
                count: '1',
                amount: '89999',
                coords: [
                  [114.085947, 22.547],
                  [138.4543, 36]
                ]
              }
            ]
          },

          {
            name: '路线',
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 3, // 箭头指向速度，值越小速度越快
              trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(0,255,255,0.1)' //  0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,255,255,1)' //  100% 处的颜色
                    }
                  ],
                  global: false //  缺省为 false
                },

                width: 2, // 线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              },
              emphasis: {
                width: 3,
                opacity: 0.5
              }
            },
            data: [
              {
                fromName: '深圳',
                toName: '德国',
                count: '1',
                amount: '89999',
                coords: [
                  [114.085947, 22.547],
                  [10, 50]
                ]
              }
            ]
          },
          {
            name: '路线',
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 3, // 箭头指向速度，值越小速度越快
              trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(236,110,20,0.1)' //  0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(236,110,20,1)' //  100% 处的颜色
                    }
                  ],
                  global: false //  缺省为 false
                },

                width: 2, // 线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              },
              emphasis: {
                width: 3,
                opacity: 0.5
              }
            },
            data: [
              {
                fromName: '深圳',
                toName: '法国',
                count: '1',
                amount: '89999',
                coords: [
                  [114.085947, 22.547],
                  [1, 45]
                ]
              }
            ]
          },
          {
            name: '路线',
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 3, // 箭头指向速度，值越小速度越快
              trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(236,204,20,0.1)' //  0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(236,204,20,1)' //  100% 处的颜色
                    }
                  ],
                  global: false //  缺省为 false
                },

                width: 2, // 线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              },
              emphasis: {
                width: 3,
                opacity: 0.5
              }
            },
            data: [
              {
                fromName: '深圳',
                toName: '意大利',
                count: '1',
                amount: '89999',
                coords: [
                  [114.085947, 22.547],
                  [11.5, 45]
                ]
              }
            ]
          },
          {
            name: '路线',
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 3, // 箭头指向速度，值越小速度越快
              trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 5 // 图标大小
            },
            lineStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(46,240,82,0.1)' //  0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: 'rgba(46,240,82,1)' //  100% 处的颜色
                    }
                  ],
                  global: false //  缺省为 false
                },

                width: 2, // 线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              },
              emphasis: {
                width: 3,
                opacity: 0.5
              }
            },
            data: [
              {
                fromName: '深圳',
                toName: '西班牙',
                count: '1',
                amount: '89999',
                coords: [
                  [114.085947, 22.547],
                  [-2, 40]
                ]
              }
            ]
          }
        ]
      }
      //  this.myEchart.setOption(option);
      this.chart.setOption(option)
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['expected', 'actual']
        },
        series: [
          {
            name: 'expected',
            itemStyle: {
              normal: {
                color: '#FF005A',
                lineStyle: {
                  color: '#FF005A',
                  width: 2
                }
              }
            },
            smooth: true,
            type: 'line',
            data: expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          },
          {
            name: 'actual',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: actualData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }
        ]
      })
    }
  }
}
</script>
